import { Component } from 'react';
import { Card, Typography, Space, Radio, Divider, Tooltip } from 'antd';

const { Title, Paragraph } = Typography;

// 高对比度颜色方案 - 选择色轮上间隔较远的颜色
const HIGH_CONTRAST_COLORS = [
  '#e53935',   // 鲜红色
  '#43a047',   // 深绿色
  '#1e88e5',   // 深蓝色
  '#f4511e',   // 橙色
  '#8e24aa',   // 深紫色
  '#ffb300',   // 亮黄色
  '#00acc1',   // 青色
  '#d81b60',   // 粉红色
  '#5d4037',   // 棕色
  '#004d40',   // 深青色
  '#3949ab',   // 靛蓝色
  '#c0ca33',   // 酸橙绿
];

class HighContrastMultiColorText extends Component {
  constructor(props) {
    super(props);
    this.state = {
      effectType: 'word', // 默认单词级
      contrastLevel: 'high', // 对比度级别
      texts: [
        "高对比度 颜色相间 文字效果",
        "Ant Design 组件 应用 示例",
        "React 类组件 开发 实践",
        "视觉设计 色彩理论 应用",
        "前端开发 UI 交互 体验",
        "High Contrast Colorful Text Effect"
      ]
    };
  }

  // 生成更高对比度的颜色序列
  getColorSequence = (length) => {
    const { contrastLevel } = this.state;
    const baseColors = HIGH_CONTRAST_COLORS;
    const sequence = [];
    
    // 根据对比度级别调整颜色间隔
    const step = contrastLevel === 'extreme' ? 3 : 2;
    
    for (let i = 0; i < length; i++) {
      const index = (i * step) % baseColors.length;
      sequence.push(baseColors[index]);
    }
    
    return sequence;
  };

  // 按单词拆分并应用高对比度颜色
  renderWordColorText = (text) => {
    const words = text.split(' ');
    const colors = this.getColorSequence(words.length);
    
    return words.map((word, index) => {
      if (!word) return <span key={index}>&nbsp;</span>;
      
      return (
        <Tooltip 
          key={index}
          title={`颜色: ${colors[index]}`}
          placement="top" // 修复：直接使用字符串而不是TooltipPlacement.TOP
        >
          <span 
            style={{ 
              color: colors[index],
              marginRight: '8px',
              padding: '2px 4px',
              borderRadius: '3px',
              transition: 'all 0.3s ease',
              fontWeight: 500,
              fontSize: '1.1em'
            }}
            onMouseOver={(e) => {
              // 鼠标悬停时增强效果
              e.target.style.backgroundColor = colors[index] + '10'; // 10%透明度的同色背景
              e.target.style.transform = 'translateY(-2px)';
              e.target.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
            }}
            onMouseOut={(e) => {
              // 鼠标离开时恢复
              e.target.style.backgroundColor = 'transparent';
              e.target.style.transform = 'translateY(0)';
              e.target.style.boxShadow = 'none';
            }}
          >
            {word}
          </span>
        </Tooltip>
      );
    });
  };

  handleEffectChange = (e) => {
    this.setState({ effectType: e.target.value });
  };

  handleContrastChange = (e) => {
    this.setState({ contrastLevel: e.target.value });
  };

  render() {
    const { effectType, contrastLevel, texts } = this.state;

    return (
      <div style={{ padding: '24px', maxWidth: 850, margin: '0 auto' }}>
        {/* 修复：用variant替换deprecated的bordered属性 */}
        <Card 
          title="高对比度单词颜色相间效果" 
          variant="outlined" // 原来的bordered={true}已被弃用
          style={{ boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)' }}
        >
          <div style={{ marginBottom: '20px' }}>
            <Title level={5}>效果设置</Title>
            <Space size="middle" style={{ marginBottom: '16px' }}>
              <Radio.Group 
                value={effectType} 
                onChange={this.handleEffectChange}
                buttonStyle="solid"
              >
                <Radio.Button value="word">单词级颜色</Radio.Button>
              </Radio.Group>
              
              <Radio.Group 
                value={contrastLevel} 
                onChange={this.handleContrastChange}
                buttonStyle="solid"
              >
                <Radio.Button value="high">高对比度</Radio.Button>
                <Radio.Button value="extreme">极致对比度</Radio.Button>
              </Radio.Group>
            </Space>
          </div>

          <Divider>示例文本</Divider>

          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {texts.map((text, index) => (
              <Paragraph key={index} style={{ 
                lineHeight: '2.2', 
                padding: '8px 12px',
                borderRadius: '6px',
                backgroundColor: index % 2 === 0 ? '#fafafa' : 'transparent'
              }}>
                {effectType === 'word' && this.renderWordColorText(text)}
              </Paragraph>
            ))}
          </Space>

          <Divider style={{ marginTop: '20px' }} />
          
          <Paragraph type="secondary">
            特点：单词间使用色轮上间隔较远的颜色，确保明显差异。鼠标悬停可查看颜色代码和额外效果。
          </Paragraph>
        </Card>
      </div>
    );
  }
}

export default HighContrastMultiColorText;
    